<template>
    <div id="Users">
         <!--面包屑 -->
        <my-breadcrumb/>
        <el-row class="main">
             <!--搜索框 -->
            <el-row>
          <el-col :span="7">
            <search-input/>
          </el-col>
          <!-- 添加用户 -->
          <el-col :span="3" class="margin-left-80" >
             <el-button type="primary" 
                @click="handlyAddUserBtn">
                {{btnOption.addBtn.txt}}
            </el-button>
            <my-dialog :btnOption='btnOption.addBtn' :isShow.sync='addIsshow'/>
          </el-col>
            </el-row>
            <!-- 表格 -->
            <el-row>
                <my-table-one :tableOptions='tableOptions' :tableData='tableData'>
                    <template #state='scope'>
                        <div>
                           <el-switch
                                v-model="scope.slotData.mg_state"
                                @change='handlyChange(scope.slotData)'
                                >
                            </el-switch>
                        </div>
                    </template> 
                     <template #option='scope'>
                    <div>
                     <el-button type="primary" icon="el-icon-edit" size="mini" @click="handlyEdit(scope.slotData)"></el-button>
                        <my-dialog :btnOption='btnOption.editBtn' :isShow.sync='editIsshow'/>
                     <el-button class="margin-left-10" type="danger" icon="el-icon-delete" size="mini" @click="handlyDelete(scope.slotData)"></el-button>
                     <el-tooltip class="item" effect="dark" content="分配角色" placement="top">
                        <el-button type="warning" icon="el-icon-setting" size="mini" @click="handlyWarning(scope.slotData)"></el-button>
                     </el-tooltip>
                        <my-dialog :btnOption='btnOption.allotBtn' :isShow.sync='assignIsshow'/>
                    </div>
                    </template>
                </my-table-one>
            </el-row>
             <!-- 分页 -->
            <el-row>
          <el-col :span="24">
            <my-pagination :pageOption='pageOption'/>
          </el-col>
            </el-row>
        </el-row>
    </div>
</template>
<script>
import { getUserList } from '@/api/users'
import {myMesBoxPop} from '@/utils/comm'
import {MessageBox} from 'element-ui'
export default {
    name:'Users',
    data() {
        return {
            tableOptions:[
                {prop:'username',label:'姓名',width:'200'},
                {prop:'email',label:'邮箱',width:'200'},
                {prop:'mobile',label:'电话',width:'200'},
                {prop:'role_name',label:'角色',width:'200'},
                {prop:'mg_state',label:'状态',width:'200',slot:'state'},
                {prop:'option',label:'操作',width:'190',slot:'option'},
            ],
            btnOption:{
                addBtn:{
                    txt:'添加用户',
                },
                editBtn:{
                    txt:'修改用户',
                },
                allotBtn:{
                    txt:'分配角色',
                }
            },
            tableData: [],
            editIsshow:false,
            assignIsshow:false,
            addIsshow:false,
            pageOption:{
                current_page:1,
                page_sizes:[2, 4, 8, 10],
                page_size:100,
                layout:'total, sizes, prev, pager, next, jumper',
                background:false,
                total:0
            },
            }
    },
    mounted(){
        //获取用户列表
        this.$store.dispatch('users/Acs_getUserList')
    },
    watch:{
        '$store.state.users.paginationData.total':{
            handler(newVal){
                this.pageOption.total=newVal;
            },
            deep:true
            
        },
        '$store.state.users.paginationData.users'(newVal){
            this.tableData=newVal
          //console.log(this.tableData);
        }
    },
    methods:{
        //开关修改
        handlyChange(row){
            //console.log(row);
            let data={
                uId:row.id,
                type:row.mg_state
            }
            this.$store.dispatch('users/Acs_putUserState',data)
        }, 
         //添加按钮
        handlyAddUserBtn(){
            this.addIsshow=true;
        },
         //编辑按钮
         handlyEdit(row){
            this.editIsshow=true;
            this.$store.commit('users/CHANGE_CURRENTROW',row);
         }, 
         //删除按钮
        handlyDelete(row){
            this.$store.commit('users/CHANGE_CURRENTROW',row);
            const succFn=()=>{
                return new Promise((resolve,reject)=>{
                     //console.log(this);
                    this.$store.dispatch('users/Acs_deleteUser').then(res=>{
                            resolve(res); 
                            this.$store.dispatch('users/Acs_getUserList')
                        }).catch(err=>{
                            reject(err)
                            //console.log(err);   
                        })
                    })  
                };
             const errFn=()=>{
                  MessageBox({
                    type: 'info',
                    message: '已取消删除'
                })
                console.log('删除失败啦~')
             }
             myMesBoxPop(succFn,errFn)   
         },
         //设置
         handlyWarning(row){
            this.assignIsshow=true;
            this.$store.commit('users/CHANGE_CURRENTROW',row);
            if (JSON.stringify(this.$store.state.role.AllRoles)==='{}') {
                console.log('发送获取所有角色的请求');
                this.$store.dispatch('role/Acs_getAllRoles')
            }
         },
    }
   
}
</script>
<style lang="scss" scoped>
    #Users{
        .main{
            margin-top: 15px;
            background: #fff;
            padding: 20px;
        }
    }
</style>